<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue-table-render</title>
</head>
<body>

<div id="app">
    <p>数组的列表渲染</p>
    <ul>
        <li v-for="item in arr">{{ item }}</li>
    </ul>
    <p>数组的条件渲染</p>
    <div v-if="arr.length > 3">现在数组长度大于3了~</div>
    <div v-else>数组长度不大于3</div>
    <p>相关依赖是数组的计算属性渲染</p>
    <ul>
        <li v-for="item in doubleArr">{{ item }}</li>
    </ul>

    <p>集合的列表渲染</p>
    <ul>
        <li v-for="item in [...set]">{{ item }}</li>
    </ul>
    <p>集合的条件渲染</p>
    <div v-if="set.has(1)">现在集合里有1了~</div>
    <div v-else>集合里没有1</div>
    <p>相关依赖是集合的计算属性渲染</p>
    <ul>
        <li v-for="item in [...doubleSetComputed]">{{ item }}</li>
    </ul>
    <p>相关依赖是集合的method方法渲染</p>
    <ul>
        <li v-for="item in [...doubleSetMethods()]">{{ item }}</li>
    </ul>
</div>

<script src="https://unpkg.com/vue"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            num: 0,
            arr: [0, 1, 2],
            set: new Set([0])
        },
        computed: {
            doubleArr() {
                return this.arr.map(item => item*2);
            },
            doubleSetComputed() {
                return new Set([...this.set].map(item => item*2));
            }
        },
        methods: {
            doubleSetMethods() {
                return new Set([...this.set].map(item => item*2));
            }
        }
    })
</script>
</body>
</html>